<template>
	<view class="container">
		<view class="tui-header-box" :style="{ height: height + 'px' }">
			<!-- <view class="tui-header" :style="{ paddingTop: top + 'px', opacity: opcity }">{{ BarTitleText }}</view> -->
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<view class="tui-icon-box" @tap="goBack">
					<image src="/static/images/huodong/left.png"></image>
				</view>
			</view>
		</view>
		<image :src="BeijingT" class="hot-bgc"></image>
		<!-- <view class="tabs-box">
			<tui-tabs
				:tabs="tabs"
				:currentTab="currentTab"
				:width="tabWidth"
				@change="change"
				sliderWidth="30"
				sliderHeight="6"
				itemWidth="33.33%"
				sliderRadius="80rpx"
				sliderBgColor="#fff"
				selectedColor="#fff"
				backgroundColor="none"
				bold="true"
				color="#fff"
				unlined="true"
			></tui-tabs>
		</view> -->
		<!-- 榜单列表 -->
		<view class="huati-box">
			<view class="huati-line" v-for="(item, index) in tabs[0].Data" @tap="wenzhangDetail(item)">
				<view class="left-box">
					<view class="xuhao-info" :style="{ color: computeColor(index) }">{{ index + 1 }}</view>
					<view>{{ item.HuatiM }}</view>
				</view>
				<view class="num-info">{{ computeNum(item.FangwenL) }}</view>
			</view>
		</view>
	</view>
	
	<!-- <view class="all-Bang" @tap="toAllBang">
		<view>查看榜单规则</view>
		<image src="/static/images/huodong/right.png"></image>
	</view> -->
</template>

<script>
export default {
	data() {
		return {
			Islogin: this.Microi.IsLogin(),
			startTime: '',
			BeijingT: '',
			BarTitleText: this.navigationBarTitleText,
			backUrl: this.backUrl,
			tabWidth: 300,
			height: 64, //header高度
			top: 26, //标题图标距离顶部距离
			scrollH: 0, //滚动总高度
			currentTab: 0,
			tabs: [
				{
					name: '热点榜',
					Data: []
				},
				{
					name: '面经',
					Data: []
				},
				{
					name: '岗位',
					Data: []
				}
			]
		};
	},
	mounted() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif

		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.tabWidth = this.width * 0.7;
					this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					this.scrollH = res.windowWidth;
				}
			});
		}, 0);
	},
	onShow() {
		this.startTime = new Date();
		this.get_morenBGC();
		this.getDataInfo();
	},
	onHide() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	onUnload() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	methods: {
		wenzhangDetail(item) {
			if (this.currentTab == 0) {
				uni.navigateTo({
					url: '/pages/my/search/searchList?info=' + item.HuatiM
				});
			} else if (this.currentTab == 1) {
				uni.navigateTo({
					url: '/pages/my/companyInfo/companyInfo?Id=' + item.GongsiID + '&currentTab=1&WenZhangID=' + item.Id
				});
			} else {
				uni.navigateTo({
					url: '/pages/my/companyInfo/companyInfo?Id=' + item.GongsiID + '&currentTab=0&WenZhangID=' + item.Id
				});
			}
		},
		async get_morenBGC() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('customize_crud', {
				EngineKey: 'KEY000009'
			});
			this.BeijingT = this.Microi.FileServer + res.Data;
		},
		getWindowHide() {
			var res = uni.getSystemInfoSync();
			console.log(res, 'res');
			this.windowTop = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
		},
		computeNum(num) {
			num = num * 1;
			if (num < 1000) {
				return num;
			} else if (num < 10000) {
				return num / 1000 + 'K+';
			} else {
				return num / 10000 + 'W+';
			}
		},
		computeColor(num) {
			if (num == 0) {
				return '#FE0505';
			} else if (num == 1) {
				return '#FF7A05';
			} else if (num == 2) {
				return '#FFDA06';
			} else {
				return '#999999';
			}
		},
		//切换tab，逻辑请自行处理
		change(e) {
			this.currentTab = e.index;
			if (!this.tabs[this.currentTab].Data.length) this.getDataInfo();
		},
		async getDataInfo() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_Hot_Bang', {
				Type: this.currentTab
			});
			this.tabs[this.currentTab].Data = res.Data;
		},
		goBack() {
			console.log(this.backUrl);
			if (this.backUrl) {
				uni.reLaunch({
					url: `/pages${this.backUrl}`
				});
			} else {
				let pages = getCurrentPages(); // 获取当前页面堆栈
				let pageCount = pages.length; // 页面堆栈中的页面数量
				// 判断是否有上级页面
				if (pageCount > 1) {
					// 如果有上级页面，则返回上级页面
					uni.navigateBack({
						delta: 1
					});
				} else {
					// 如果没有上级页面，则返回首页
					uni.switchTab({
						url: '/pages/tabbar/find/find' // 替换为你的首页路径
					});
				}
			}
		}
	}
};
</script>

<style scoped>
.container {
	padding: 0 0 150rpx 0;
	color: #fff;
}

.tui-header-box {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	/* background-color: #fff; */
}

.tui-header {
	width: 100%;
	font-weight: 500;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;

	color: var(----, #fff);
	text-align: center;

	/* 标题/标题 */
	font-family: 'PingFangSC';
	font-size: calc(18rpx * 1.9);
	font-style: normal;
	font-weight: 600;
	line-height: calc(26rpx * 1.9);
}

.tui-header-icon {
	position: fixed;
	top: 0;
	left: 10px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	height: 32px;
	transform: translateZ(0);
	z-index: 9999;
}

.tui-header-icon .tui-badge {
	background: #e41f19 !important;
	position: absolute;
	right: -4px;
}

.tui-icon-ml {
	margin-left: 20rpx;
}

.tui-icon-box {
	position: relative;
	height: 20px !important;
	width: 20px !important;
	padding: 6px !important;

	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tui-icon-box image {
	width: 22rpx;
	height: 40rpx;
	flex-shrink: 0;
}

.hot-bgc {
	width: 100%;
	height: 414rpx;
}
.tabs-box {
	margin-top: -98rpx;
}

.all-Bang {
	position: fixed;
	bottom: 62rpx;
	width: 100%;
	font-weight: 500;
	font-size: 28rpx;
	color: #999999;
	line-height: 31rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12rpx;
}
.all-Bang image {
	width: 16rpx;
	height: 20rpx;
}
.huati-box {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 32rpx;
	margin: 30rpx;
}
.huati-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.left-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;

	font-size: 32rpx;
	color: #000;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.xuhao-info {
	height: 36rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 32rpx;
	color: #999999;
	line-height: 35rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.num-info {
	height: 36rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #999999;
	line-height: 35rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
</style>
